import { Button, Input, List } from 'antd';
import React, { Component } from 'react';
import store from '../../store';
import {
    CHANGE_INPUT,
    ADD_ITEM,
    DELETE_ITEM
} from '../../store/actionTypes';
import { changeInputAction, addItemAction, deleteItemAction } from '../../store/actionCreators'

class TodoList extends Component {
    constructor(props) {
        super(props)
        // console.log(store.getState())
        this.state = store.getState()
        // 订阅stroe,跟踪store中数据的变化
        store.subscribe(this.storeChange)
    }

    ChangeInputValue = (e) => {
        const action = changeInputAction(e.target.value)
        store.dispatch(action)
    }

    storeChange = () => {
        this.setState(store.getState())
    }

    clickBtn = () => {
        const action = addItemAction()
        store.dispatch(action)
    }
    deleteItem = (index) => {
        const action = deleteItemAction(index)
        store.dispatch(action)
    }
    render() {
        return (
            <div style={{ margin: '10px' }}>
                <a href='https://www.redux.org.cn/docs/basics/Actions.html' title='redux'>redux文档</a>
                <div>
                    <Input
                        placeholder={this.state.inputValue}
                        style={{ width: '250px', marginRight: '10px' }}
                        onChange={this.ChangeInputValue}
                    />
                    <Button
                        type='primary'
                        onClick={this.clickBtn}
                    >增加</Button>

                </div>
                <div style={{ margin: '10px', width: '300px' }}>
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item, index) => (<List.Item onClick={() => this.deleteItem(index)}>{item}</List.Item>)}
                    />
                </div>

            </div>

        );
    }
}

export default TodoList;

